<!DOCTYPE html>
<html lang="en">
<head th:fragment = "head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">后台管理</title>

    <style>
        .nav-hidden {
            display: none;
        }

        .nav-show {
            display: block;
            position: fixed!important; ;
            top: 0;
            width: 100%;
            z-index: 10;
            max-height: 60px;
            /*margin-bottom: 100px;*/

            margin-bottom: auto!important;
        }

    </style>



    <link rel="stylesheet" href="../../static/cssc/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="../../static/semantics-dist/semantic.min.css" th:href="@{/semantics-dist/semantic.min.css}">
    <link rel="icon" th:href="@{/images/icon1logo32.ico}" href="/favicon.ico">

    <script src="../../static/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}" ></script>
    <link rel="stylesheet" href="../../static/lib/editormd-master/css/editormd.min.css"  th:href="@{/lib/editormd-master/css/editormd.min.css}">

    <script src="../lib/marked.min.js" th:src="@{/lib/editormd-master/lib/marked.min.js}"></script>
    <script src="../lib/prettify.min.js" th:src="@{/lib/editormd-master/lib/prettify.min.js}"></script>

    <script src="../lib/raphael.min.js" th:src="@{/lib/editormd-master/lib/raphael.min.js}"></script>
    <script src="../lib/underscore.min.js" th:src="@{/lib/editormd-master/lib/underscore.min.js}"></script>
    <script src="../lib/sequence-diagram.min.js" th:src="@{/lib/editormd-master/lib/sequence-diagram.min.js}"></script>
    <script src="../lib/flowchart.min.js" th:src="@{/lib/editormd-master/lib/flowchart.min.js}"></script>
    <script src="../lib/jquery.flowchart.min.js" th:src="@{/lib/editormd-master/lib/jquery.flowchart.min.js}"></script>

    <script src="../../static/lib/editormd-master/editormd.min.js" th:src="@{/lib/editormd-master/editormd.min.js}"> </script>


<!--    <script src="../../static/js/marked.min.js" th:src="@{/js/marked.min.js}" defer></script>-->
    <script src="../../static/semantics-dist/semantic.min.js" th:src="@{/semantics-dist/semantic.min.js}" ></script>

    <script>
        $(document).ready(function() {
            $('#newblog-container').load('/footer/newblog' );
        });
    </script>

    <style >
        body {

            background-image: url(/images/background2.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取菜单按钮元素
            var menuButton = document.querySelector('.ui.menu.toggle.button');

            // 获取导航栏元素
            var navbar = document.getElementById('myNavbar');

            // 添加点击事件监听器
            menuButton.addEventListener('click', function () {
                // 切换导航栏的最大高度样式
                navbar.classList.toggle('expanded'); // 切换类名，你可以在 CSS 中定义这个类的样式
            });
        });
    </script>
</head>

<body  >
<nav th:fragment="menu(n)" id="myNavbar" class = "nav-show  ui attached  segment m-padded-tb-mini m-shadow-small">
    <div class="ui container"  >
        <div class="ui    secondary stackable menu">
              <h4 class="ui  teal header item" th:href="@{/}" ><i class="ui  pencil icon"></i>学途智助</h4>
              <a class="m-item m-mobile-hidden item" th:href="@{/}"           th:classappend = "${(n == 1) ? 'active' : ''}"> <i class="ui home icon">  </i>首页</a>
            <a class="m-item m-mobile-hidden item" th:href="@{'/types?page=0&id=-1' }" th:classappend = "${(n == 2) ? 'active' : ''}"> <i class="ui folder  icon" > </i>分类</a>
            <a class="m-item m-mobile-hidden item" th:href="@{'/tags?page=0&id=-1' }"th:classappend = "${(n == 3) ? 'active' : ''}"><i class="ui tags icon" >   </i>标签</a>
            <a class="m-item m-mobile-hidden item" th:href="@{/aboutme}" th:classappend = "${(n == 5) ? 'active' : ''}"><i class="ui info icon" ></i>关于网站</a>
            <a class="m-item m-mobile-hidden item" th:href="@{/admin/index}" th:classappend = "${(n == 4) ? 'active' : ''}"><i class="ui clone icon">  </i>登录 </a>
            <div class=" m-item m-mobile-hidden right item">
                <form name="search" action="#"  id="searchForm"  th:action="@{/search}" method="get" target="_blank">
                    <div class="ui icon   tiny  input m-margin-tb-mini">
                        <input type="hidden" name="page" th:attr="value=${page == null ? 0 : page.number}">

                        <input type="text" name="query" placeholder="Search..." th:value="${query}">
                        <i onclick="document.forms['search'].submit()" class=" small search link icon"></i>
                    </div>
                </form>

            </div>
        </div>
        <a href="#" class="ui menu toggle m-mobile-show  button">
            <i class="sidebar icon m-top-right "></i>
        </a>
    </div>

</nav>

<div class="m-padded-tb-large " >

    <div class="ui container">
        <div class="ui two stackable grid">
            <!--                实际上包括文章栏在内的文章区域 左边的文章列表-->
            <div class="eleven wide column m-padded-tb-large">
                <div class="ui top attached segment">
                    <!--                        头部-->
                    <div class="ui middle aligned two column grid">
                        <!--                            two column 要一起 不分开-->
                        <div class="  column">
                            <h3 class="ui teal header">文章  </h3>
                        </div>
                        <div class="   right aligned column">
                            共
                            <h2 class="ui orange header m-inline-block">14</h2>
                            篇
                        </div>

                    </div>
                </div>

                <!--content-->

                <div class="ui attached   segment">

                    <!--                    单独文章-->
                    <div class="ui padded segment m-padded-tb-large">
                        <div class="ui mobile reversed stackable  grid">

                            <div class="ui eleven wide column">


                                <h3 class="ui header">深化单词</h3>

                                <p class="m-text"> 深化单词理解
                                    上下文学习：将单词放入句子或短文中，理解其在具体语境中的含义和用法。并更好地理解其背后的文化和语境。
                                    词根词缀：学习词根和词缀的知识，更容易记忆和推测新单词的含义。
                                    同义词和反义词：并在写作和阅读中更灵活地运用。</p>


                                <div>
                                    <div class="ui grid">
                                        <div class="twelve wide column">
                                            <div class="ui mini horizontal link list">
                                                <div class="item">
                                                    <img alt=""  class="ui avatar image" src="../static/images/mio1.png" th:src="@{/images/mio1.png}"> <!-- 头像 -->

                                                    <div class="content">
                                                        <a href="#" class="header">长野原美绪</a> <!-- 名字 -->
                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>2024-2-15
                                                </div> <!-- 时间 -->
                                                <div class="item">
                                                    <i class="eye icon"></i>55555
                                                </div> <!-- 观看数 -->

                                            </div>
                                        </div>
                                        <div class="right aligned middle aligned four wide  column m-padded-mini m-text-thin">
                                            <a href="#" target="_blank" class="ui teal mini basic  left pointing label">认知升级</a>
                                        </div>
                                    </div>
                                </div>



                            </div>
                            <!--                        首图-->
                            <div class="ui five wide column">
                                <div class="items">

                                    <img src="../static/images/mio1.png"
                                         class="ui round image" alt="" style="width: 130px">
                                </div>
                            </div>
                        </div>
                        <!--                        </div>-->
                    </div>
                    <div class="ui padded segment m-padded-tb-large">
                        <div class="ui mobile reversed stackable  grid">

                            <div class="ui eleven wide column">


                                <h3 class="ui header">深化单词</h3>

                                <p class="m-text"> 深化单词理解
                                    上下文学习：将单词放入句子或短文中，理解其在具体语境中的含义和用法。并更好地理解其背后的文化和语境。
                                    词根词缀：学习词根和词缀的知识，更容易记忆和推测新单词的含义。
                                    同义词和反义词：并在写作和阅读中更灵活地运用。</p>


                                <div>
                                    <div class="ui grid">
                                        <div class="twelve wide column">
                                            <div class="ui mini horizontal link list">
                                                <div class="item">
                                                    <img alt=""  class="ui avatar image" src="../static/images/mio1.png"> <!-- 头像 -->

                                                    <div class="content">
                                                        <a href="#" class="header">长野原美绪</a> <!-- 名字 -->
                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>2024-2-15
                                                </div> <!-- 时间 -->
                                                <div class="item">
                                                    <i class="eye icon"></i>55555
                                                </div> <!-- 观看数 -->

                                            </div>
                                        </div>
                                        <div class="right aligned middle aligned four wide  column m-padded-mini m-text-thin">
                                            <a href="#" target="_blank" class="ui teal mini basic  left pointing label">认知升级</a>
                                        </div>
                                    </div>
                                </div>



                            </div>
                            <!--                        首图-->
                            <div class="ui five wide column">
                                <div class="items">

                                    <img src="../static/images/mio1.png"
                                         class="ui round image" alt="" style="width: 130px">
                                </div>
                            </div>
                        </div>
                        <!--                        </div>-->
                    </div>
                    <div class="ui padded segment m-padded-tb-large">
                        <div class="ui mobile reversed stackable  grid">

                            <div class="ui eleven wide column">


                                <h3 class="ui header">深化单词</h3>

                                <p class="m-text"> 深化单词理解
                                    上下文学习：将单词放入句子或短文中，理解其在具体语境中的含义和用法。并更好地理解其背后的文化和语境。
                                    词根词缀：学习词根和词缀的知识，更容易记忆和推测新单词的含义。
                                    同义词和反义词：并在写作和阅读中更灵活地运用。</p>


                                <div>
                                    <div class="ui grid">
                                        <div class="twelve wide column">
                                            <div class="ui mini horizontal link list">
                                                <div class="item">
                                                    <img alt=""  class="ui avatar image" src="../static/images/mio1.png"> <!-- 头像 -->

                                                    <div class="content">
                                                        <a href="#" class="header">长野原美绪</a> <!-- 名字 -->
                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>2024-2-15
                                                </div> <!-- 时间 -->
                                                <div class="item">
                                                    <i class="eye icon"></i>55555
                                                </div> <!-- 观看数 -->

                                            </div>
                                        </div>
                                        <div class="right aligned middle aligned four wide  column m-padded-mini m-text-thin">
                                            <a href="#" target="_blank" class="ui teal mini basic  left pointing label">认知升级</a>
                                        </div>
                                    </div>
                                </div>



                            </div>
                            <!--                        首图-->
                            <div class="ui five wide column">
                                <div class="items">

                                    <img src="../static/images/mio1.png"
                                         class="ui round image" alt="" style="width: 130px">
                                </div>
                            </div>
                        </div>
                        <!--                        </div>-->
                    </div>
                    <div class="ui padded segment m-padded-tb-large">
                        <div class="ui mobile reversed stackable  grid">

                            <div class="ui eleven wide column">


                                <h3 class="ui header">深化单词</h3>

                                <p class="m-text"> 深化单词理解
                                    上下文学习：将单词放入句子或短文中，理解其在具体语境中的含义和用法。并更好地理解其背后的文化和语境。
                                    词根词缀：学习词根和词缀的知识，更容易记忆和推测新单词的含义。
                                    同义词和反义词：并在写作和阅读中更灵活地运用。</p>


                                <div>
                                    <div class="ui grid">
                                        <div class="twelve wide column">
                                            <div class="ui mini horizontal link list">
                                                <div class="item">
                                                    <img alt=""  class="ui avatar image" src="../static/images/mio1.png"> <!-- 头像 -->

                                                    <div class="content">
                                                        <a href="#" class="header">长野原美绪</a> <!-- 名字 -->
                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>2024-2-15
                                                </div> <!-- 时间 -->
                                                <div class="item">
                                                    <i class="eye icon"></i>55555
                                                </div> <!-- 观看数 -->

                                            </div>
                                        </div>
                                        <div class="right aligned middle aligned four wide  column m-padded-mini m-text-thin">
                                            <a href="#" target="_blank" class="ui teal mini basic  left pointing label">认知升级</a>
                                        </div>
                                    </div>
                                </div>



                            </div>
                            <!--                        首图-->
                            <div class="ui five wide column">
                                <div class="items">

                                    <img src="../static/images/mio1.png"
                                         class="ui round image" alt="" style="width: 130px">
                                </div>
                            </div>
                        </div>
                        <!--                        </div>-->
                    </div>
                    <div class="ui padded segment m-padded-tb-large">
                        <div class="ui mobile reversed stackable  grid">

                            <div class="ui eleven wide column">


                                <h3 class="ui header">深化单词</h3>

                                <p class="m-text"> 深化单词理解
                                    上下文学习：将单词放入句子或短文中，理解其在具体语境中的含义和用法。并更好地理解其背后的文化和语境。
                                    词根词缀：学习词根和词缀的知识，更容易记忆和推测新单词的含义。
                                    同义词和反义词：并在写作和阅读中更灵活地运用。</p>


                                <div>
                                    <div class="ui grid">
                                        <div class="twelve wide column">
                                            <div class="ui mini horizontal link list">
                                                <div class="item">
                                                    <img alt=""  class="ui avatar image" src="../static/images/mio1.png"> <!-- 头像 -->

                                                    <div class="content">
                                                        <a href="#" class="header">长野原美绪</a> <!-- 名字 -->
                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i>2024-2-15
                                                </div> <!-- 时间 -->
                                                <div class="item">
                                                    <i class="eye icon"></i>55555
                                                </div> <!-- 观看数 -->

                                            </div>
                                        </div>
                                        <div class="right aligned middle aligned four wide  column m-padded-mini m-text-thin">
                                            <a href="#" target="_blank" class="ui teal mini basic  left pointing label">认知升级</a>
                                        </div>
                                    </div>
                                </div>



                            </div>
                            <!--                        首图-->
                            <div class="ui five wide column">
                                <div class="items">

                                    <img src="../static/images/mio1.png"
                                         class="ui round image" alt="" style="width: 130px">
                                </div>
                            </div>
                        </div>
                        <!--                        </div>-->
                    </div>


                    <!--                        底部-->
                    <div>
                        <div class="ui attached segment  ">
                            <div class="ui middle aligned two column grid">
                                <div class="  column">
                                    <a href="#" class="ui teal basic button"s>上一页</a>
                                </div>
                                <div class=" right aligned column">
                                    <a href="#" class="ui teal basic button">下一页</a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!--侧边栏-->

            <div class="five wide column m-padded-tb-small ">

                <!--分类卡片-->
                <div class="ui  segments m-margin-tb-large">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class=column>
                                <i class="idea icon"> </i>分类
                            </div>
                            <div class="right aligned column">
                                <a href=""   target="_blank">更多<i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment ">
                        <div class="ui vertical fluid menu">
                            <a href="#" class="item">学习日志
                                <div class="ui teal basic left   label">13</div>
                            </a>
                            <a href="#" class="item">学习日志
                                <div class="ui teal basic left   label">13</div>
                            </a>
                            <a href="#" class="item">学习日志
                                <div class="ui teal basic left   label">13</div>
                            </a>
                            <a href="#" class="item">学习日志
                                <div class="ui teal basic left   label">13</div>
                            </a>
                            <a href="#" class="item">学习日志
                                <div class="ui teal basic left   label">13</div>
                            </a>
                            <a href="#" class="item">学习日志
                                <div class="ui teal basic left   label">13</div>
                            </a>
                        </div>
                    </div>


                </div>
                <!--标签-->

                <div class="ui  segments m-margin-tb-large">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class=column>
                                <i class="idea icon"> </i>标签
                            </div>
                            <div class="right aligned column">
                                <a href=""   target="_blank">更多<i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui red segment">

                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">认知升级
                            <div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">认知升级
                            <div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">认知升级
                            <div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">认知升级
                            <div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论
                            <div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论
                            <div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论
                            <div class="detail">23</div>
                        </a>
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论
                            <div class="detail">23</div>
                        </a>

                    </div>
                </div>
                <!--最新推荐-->

                <div class="ui  segments m-margin-tb-large">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class=column>
                                <i class="idea icon"> </i>最新推荐
                            </div>

                        </div>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black m-text-thin">深化单词</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black m-text-thin">深化单词</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black m-text-thin">深化单词</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black m-text-thin">深化单词</a>
                    </div>
                </div>
                <h3 class="ui horizontal  divider header"> 这里原本是二维码公众号是吧</h3>
                <div class="ui centered card">
                    <img src="../static/images/木头人观察.jpg" alt="木头人观察图" class="ui rounded image" th:src="@{/images/木头人观察.jpg}">
                </div>
            </div>
        </div>

    </div>
</div>

<br>
<br>


<footer th:fragment="footer"  class = "ui    attached segment m-padded-tb-mini m-shadow-big-up">


    <br>
    <br>
    <br>
    <div class="ui center aligned container">
        <div class="ui   divided stackable grid">

            <div class="three wide column">

                <div class="middle aligned">

                    <img src="../static/images/mio1.png"
                         class="ui middle aligned round image" alt="" style="width: 150px" th:src="@{/images/learn.png}">


                </div>


            </div>
            <div class="three wide column ">
                <h4 class ="ui   header" >最新文章</h4>
                <div class="ui red  link list">
                    <div id="newblog-container">
                        <div class="ui   link list" th:fragment="newblogList">
                            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item black m-text-thin" th:each="blog : ${newblogs}" th:text="${blog.title}">用户故事（User Story）</a>
                            <!--/*-->
                            <!--*/-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class ="ui   header">联系方式</h4>
                <div class="ui black  link list">
                    <a href="https://github.com/yonghuname" target="_blank" class="item"> <i class="github icon"></i>Github</a>
                    <a href="https://gitee.com/tzjm" class="item" target="_blank"> <image class=" mini icon" src="../static/images/gitee-logo.ico"
                                                                                          th:src="@{/images/gitee-logo.ico}" style="max-width: 13px;max-height:13px"></image> Gitee</a>

                </div>
            </div>

            <div class="seven wide column">

                <h4 class ="ui   header">网页介绍</h4>

                <p  class="m-text-thin m-text-spaced m-opacity-mini ">"全方位学习伙伴，智慧记录每一步 —— 学途智助，让知识触手可及，心灵沟通无间。"</p>
                <a class="m-text-thin m-text-spaced m-opacity-mini" href="https://beian.miit.gov.cn"> 赣ICP备2024032770号-1 </a>
            </div>
        </div>

        <!--111111111111111111111111111111-->

        <div class="ui   section divider m-padded-tb-">
        </div> <p class="m-text-thin m-text-spaced m-opacity-mini"> All rights reserved   </p>
    </div>
</footer>

</body>




</html>